<template>
  <div class="game">
    <h1>{{ name }}</h1>
    <ul class="game-body">
      <li v-for="(number, i) in 9" @click="operation(number)">
        <span v-for="(item, key) in msg" v-if="number == item.address">{{ item.player }}</span>
      </li>
    </ul>
    <div class="state">
      <div class="operation">{{ gameStatus }} {{ gamePlayer }}</div>
      <div class="journal">
        <div class="msg" @click="retreat(0)">
          <b>1.</b>
          <span>Go to game start</span>
        </div>
        <div class="msg" v-for="(item, i) in msg" @click="retreat(i+1)">
          <b>{{ i + 2 }}.</b>
          <span>Go to move #{{ item.address }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "game",
  data () {
    return {
      isGomeOver: false,
      name: "画圈游戏",
      gameStatus: "Naxt player: ",
      gamePlayer: 'X',
      msg: 
      [
        // {address:1, player:"X", msg:'Go to move #1'},
      ]
    }
  },
  methods: {
    // 游戏操作
    operation: function(key){
      if (this.isGomeOver) return alert('游戏结束！');

      let msg = this.msg;
      let isExist = false;
      for (let i = 0; i < msg.length; i++) {
        if(msg[i].address == key){
          isExist = true;
          break;
        }
      }
      if (!isExist) {
        msg.push({address: key, player: this.gamePlayer})
        this.msg = msg;
        this.gameStatus = "Naxt player: ";
        this.gamePlayer = this.gamePlayer == 'X'?'O':'X';
        this.calculation(msg)
      }
    },
    // 计算一个数组是否保护别一个数组
    isContained: function(a, b){
      if(!(a instanceof Array) || !(b instanceof Array)) return false;
      if(a.length < b.length) return false;
      var aStr = a.toString();
      for(var i = 0, len = b.length; i < len; i++){
        if(aStr.indexOf(b[i]) == -1) return false;
      }
      return true;
    },
    //计算玩家连成一线
    calculation: function(msg){
      let line = [
        [1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7]
      ]
      let x = [],o = [],gamePlayer;
      for (const key in msg) {
        let address = msg[key]['address'];
        if (msg[key].player == 'X') {
          x.push(address)
        } else {
          o.push(address)
        }
      }
      for (const key in line) {
        let xLine = this.isContained(x,line[key])
        let oLine = this.isContained(o,line[key])
        console.log(xLine,oLine)
        if(xLine||oLine) {
          gamePlayer = xLine?'X':'O'
          break;
        }
      }
      if(gamePlayer){
        this.gameStatus = "Winner："
        this.gamePlayer = gamePlayer
        this.isGomeOver = true
      }
    },
    // 后退
    retreat:function(key){
      let msg = [...this.msg];
      msg.length = key;
      this.msg = msg;
      this.isGomeOver = false;
      this.gamePlayer = key != 0 && msg[key-1].player == 'X'?'O':'X';
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
.game-body{
  width: 153px;
  display: inline-block;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.game-body::after{
  content: '';
  clear: both;
}
.game-body li{
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.game-body span{
  text-align: center;
  font-weight: bolder;
  font-size: 40px;
}

.operation{
  font-weight: bold;
}
.journal .msg{
  cursor: pointer;
  margin-top: 10px;
}
.journal span{
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 0 4px;
  border-radius: 4px;
}
</style>
